<script>

var cod_select = "";
var todos = 1;
var cadeira = String();
var todos = false;
var salvo = false;
var proximop = false;
var adicionar = 4;

function apl_todos()
{
	$("#prods").slideUp();
	$(".btn_aplicar").animate({fontSize: '26px'}, 500);
	$(".checkb").click();

	todos = true;
}

function adicionarMesa(){
	//alert(adicionar);
	switch(adicionar){
	case 8: $(".mesa2").fadeIn("fast");
			break;
	}
}

function saveComent()
{
	if(!cod_select)
	{
		msg({vmsg: "Selecione um item."});

		return false;
	}
	
	if(!salvo)
	{
		salvo = true;
	}else{
		return false;
	}
	
	esconderKeyboard();
	//alert(cod + $("#text_coment").val());
	
	if(cadeira != '')
	{
		cadeira = String(cadeira);
		
		$("#text_coment").val($("#text_coment").val()+' para cadeira: ' + cadeira.substr(cadeira, (cadeira.length - 1), 0));
	}
	else
	{
		//$("#text_coment").val();
	}

	$.post("pedido/savecoment", $("#form_com").serialize(), function(){
		$('#coment_all').hide();
		listProd(); 
		//$("#comentDiv").css("display", "none");
	});
	msg({vmsg: "Comentario Salvo.",time: 3000});
}

function mostraMesa(un)
{
	$(".mesa_img").hide();
	$(".mesas_" + un).slideDown("fast");
}

function setCadeira(obj)
{
	if($(obj).css("background-image") != "none"){
		$(obj).css("background-image", "none");
		cadeira = cadeira.replace(parseInt($(obj).html()) + '|', '');
	}else{
		$(obj).css("background-image", "url('/cafe/public/images/actions/downa.png')")
		.css("background-repeat", "no-repeat");
		cadeira = String(cadeira + parseInt($(obj).html()) + '|');
	}
	
	//proximoPasso();
}

function proximoPasso()
{
	$("#select_cadeira").hide();
	$("#select_produto").fadeIn("fast");
	$("#span_cadeira").html(cadeira);	
	if(proximop)
		saveComent();
}

function addTxtComent(txt)
{
	$("#text_coment").val(txt);
}



$(function(){
	var bool = "<?php echo $this->arr_coment; ?>";

	if(!bool)
	{
		$('#coment_all').hide();

		msg({vmsg: "Nenhum item adicionado."});
	}

	$(".sort").tablesorter({widgets: ['zebra']});
	
});

</script>

<div id="coment_all">
	<div class="blk_screen" style="opacity: 0.8; position: fixed; z-index: 980; 
	width: 100%; height: 100%; background-color: white; top: 0; left: 0;"></div>
	<div class="ui-corner-all" style="border: 1px solid #B0ADAD; padding: 10px; 
	background: white; position: absolute; z-index: 981; top: 30px; width: 500px; 
	left: 50%; margin-left: -250px;">
		<div id="select_cadeira">
			<div class="button ui-corner-all" onclick="adicionar=adicionar+4; adicionarMesa();" 
			style="text-align: center; float: left; padding: 5px 20px 5px 20px; width: 21px; float: right;">
				<b>+</b>
			</div>
			<div id="titlekeyNum" class="ui-widget ui-corner-all" 
			style="font-size: 22px; text-align: left; color: gray">
				1. Selecione alguma(s) cadeira(s).
			</div>
			<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
			<table align="center">
				<tr class="mesa_img">
					<td style="font-size: 15px; font-weight: bold;">
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 35px; margin-left: 30px; background-position: 58px 50%;
						width: 40px; height: 30px;padding-left: 50px;" onclick="setCadeira(this);">
							1
						</div>
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 110px; margin-left: 30px; 
						background-position: 58px 50%;
						width: 40px; height: 30px; padding-left: 50px;" onclick="setCadeira(this);">
							3
						</div>
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 35px; margin-left: 125px; background-position: 8px 50%;
						width: 40px; height: 30px; padding-right: 50px;" onclick="setCadeira(this);">
							2
						</div>
						<div style="position: absolute; padding-top: 10px; background-position: 8px 50%;
						text-align: center; margin-top: 110px; margin-left: 125px;
						width: 40px; height: 30px; padding-right: 50px;" onclick="setCadeira(this);">
							4
						</div>
						<img src="public/images/mesa.png" />
					</td>
				</tr>
			</table>
			<table align="center" style="display: none;" class="mesa2">
				<tr class="mesa_img">
					<td style="font-size: 15px; font-weight: bold;">
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 35px; margin-left: 30px; background-position: 58px 50%;
						width: 40px; height: 30px;padding-left: 50px;" onclick="setCadeira(this);">
							5
						</div>
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 110px; margin-left: 30px; 
						background-position: 58px 50%;
						width: 40px; height: 30px; padding-left: 50px;" onclick="setCadeira(this);">
							7
						</div>
						<div style="position: absolute; padding-top: 10px; 
						text-align: center; margin-top: 35px; margin-left: 125px; background-position: 8px 50%;
						width: 40px; height: 30px; padding-right: 50px;" onclick="setCadeira(this);">
							6
						</div>
						<div style="position: absolute; padding-top: 10px; background-position: 8px 50%;
						text-align: center; margin-top: 110px; margin-left: 125px;
						width: 40px; height: 30px; padding-right: 50px;" onclick="setCadeira(this);">
							8
						</div>
						<img src="public/images/mesa.png" />
					</td>
				</tr>
			</table>
		</div>
		<div id="select_produto" style="display: none;">
			<div id="titlekeyNum" class="ui-widget ui-corner-all" 
			style="font-size: 22px; text-align: left; color: gray">
				2. Informe a descricao para cadeira: <span style="color: red;" id="span_cadeira"></span>.
			</div>
			<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
			<div style="padding: 15px; text-align: center; margin-bottom: 5px;" 
			onclick="apl_todos();" class="ui-corner-all button btn_aplicar">Aplicar para Todos Itens</div>
			<form id="form_com">
			<input type="hidden" name="caf04_cod_item" value="<?php echo $this->arr_coment[0]["caf04_cod_item"]; ?>" />
			<input type="hidden" name="caf04_cod_prod" value="<?php echo $this->arr_coment[0]["caf04_cod_prod"]; ?>" />
				<table id="prods" class="sort" width="100%" cellspacing="1" 
				cellpadding="10" style="font-size: 15px;">
					<thead>
						<tr>
							<th style="background-image: none;">
								
							</th>
							<th>
								Produto
							</th>
							<th>
								Comentario
							</th>
						</tr>
					</thead>
					<tbody>
					<?php 
					foreach ($this->arr_coment as $key => $val)
					{
						$cod = $val["caf04_cod"];
					?>
					<tr onclick="$('#<?php echo $cod; ?>_radio').click();">
						<td width="1%">
							<input class="checkb" type="checkbox" 
							onclick="(cod_select = <?php echo $val["caf04_cod"]; ?>);" 
							id="<?php echo $val["caf04_cod"]; ?>_radio" 
							value="<?php echo $val["caf04_cod"]; ?>" 
							name="prod_radio[<?php echo $val["caf04_cod"]; ?>]" />
						</td>
						<td width="1%" nowrap="nowrap">
							<?php echo "{$val["caf05_prod"]}({$val["caf05_car"]})"; ?>
						</td>
						<td>
							<i><?php echo $val["caf04_coment"]; ?></i>
						</td>
					</tr>
					<?
					}
					?>
					</tbody>
				</table>
			<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
			<div style="padding: 5px 0 5px 0; text-align: center;">
				<a style="padding: 10px;" onclick="addTxtComent('Com Gelo');" href="javascript:;">Com Gelo</a>|<a style="padding: 10px;" onclick="addTxtComent('Sem Gelo');" href="javascript:;">Sem Gelo</a>
			</div>
			<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
			<input type="text" onclick="showKeyboard('text_coment');" 
			name="caf04_coment" id="text_coment" class="ui-corner-all" 
			style="width: 497px; border: 1px solid gray; font-size: 20px;" />
			</form>
		</div>
		<hr style="border-top: 1px dashed gray; margin-top: 5px; margin-bottom: 5px;" />
		<div>
			<div class="button ui-corner-all" onclick="$('#coment_all').hide(); esconderKeyboard();" 
			style="text-align: center; float: left; padding: 20px; width: 201px;">
				<b>Cancelar</b>
			</div>
			<div id="proximo_passo" class="button ui-corner-all" onclick="proximoPasso(); proximop = true;" 
			style="text-align: center; padding: 20px; margin-left: 256px; width: 201px;">
				<b>Proximo >></b>
			</div>
		</div>
	</div>
</div>